<template>
  <div class='flex text-base bg-white dark:bg-zinc-800 duration-500 w-full font-normal h-4'>
    <div class='flex-1 text-center text-sm text-red-500 dark:text-orange-400'>电机型号</div>
    <div class='flex-1 text-center text-sm dark:text-white'>电机品牌</div>
  </div>
  <div class="flex absolute left-0 right-0 top-8 bottom-6 text-sm">
    <div class="w-[25%] overflow-y-scroll bg-zinc-200 dark:bg-zinc-700 dark:text-zinc-300 pt-0.5">
      <div
        v-for='(item,index) in typeList'
        :key='index'
        class='leading-4 text-center duration-300 font-light'
        :style='{
          background:item.active?"white":"",
          color:item.active?"black":"",
        }'
        @click='choseOneType(item)'
      >
        {{item.name}}
      </div>
    </div>
    <div class="w-[75%] overflow-y-scroll bg-zinc-50 pt-0.5 dark:bg-zinc-600">
      <div>
        <search-vue></search-vue>
      </div>
    </div>
  </div>
</template>
<script setup>
import SearchVue from '@/views/machinery/searchList/index.vue'
import { ref } from 'vue'

const typeList = ref([])
const getTypeList = () => {
  typeList.value = [
    {
      name: 'YE2',
      active:false
    },
    {
      name: 'YE3',
      active: true
    },
    {
      name: 'YE4',
      active: false
    },
    {
      name:'防爆电机',
      active: false
    },
    {
      name:'备品备件',
      active: false
    }
  ]
}
getTypeList()
const list = ref(100)

const choseOneType = (item) => {
  typeList.value.forEach(ite => {
    if (ite.active) ite.active = false
  })
  item.active = true
}
</script>
